'use strict';
import React, { Component, createContext } from 'react';

const cla = createContext({ uid: 11 });
export default class ClassCom extends Component<any, any> {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
      user: {
        id: 0,
      },
    };
    console.log('constructor', '组件初始化阶段');
  }

  render() {
    console.log('render', '渲染阶段,即将渲染');

    return (
      <div>
        ClassCom{' '}
        <button
          onClick={() => {
            this.setState((pre: any) => {
              pre.user.id += 1;
              console.log(pre);

              return pre;
            });
          }}
        >
          ClassCom 按钮
        </button>
        <cla.Provider value={{ uid: 13 }}>
          <Son />
        </cla.Provider>
        {this.state.count}
        {this.state.user.id}
      </div>
    );
  }
  componentDidMount() {
    console.log('componentDidMount', '组件挂载完成');
  }

  componentWillUnmount() {
    // console.log('componentWillUnmount', '组件即将卸载');
  }
  static getDerivedStateFromProps() {
    console.log('getDerivedStateFromProps');
    return null; //必须返回 否则报错  更新使用 但是组件第一次挂载的时候也会执行一次 先于shouldComponentUpData
  }
  shouldComponentUpdate(pre) {
    console.log('shouldComponentUpdate', '组件即将更新');
    return true; //必须返回 否则报错  可作用于性能优化
  }
  getSnapshotBeforeUpdate() {
    console.log('getSnapshotBeforeUpdate ');
    return null; //必须返回东西
  }

  componentDidUpdate() {
    console.log('componentDidUpdate', '组件完成更新');
  }

  componentDidCatch() {
    console.log('componentDidCatch', '错误捕获阶段');
  }
  static getDerivedStateFromError() {
    console.log('getDerivedStateFromError', '错误捕获阶段');
  }
}

class Son extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    return (
      <div>
        son
        <Grson />
      </div>
    );
  }
}
class Grson extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  static contextType = cla;
  render() {
    console.log('Grson的构造器', this);
    return <div></div>;
  }
}
